<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello simple autocomplete</title>
<link rel="stylesheet"
	href="../../common/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" />
<style type="text/css">
.red {
	color: red
}
</style>
<script type="text/javascript" src="../../common/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="../../common/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
	$(function() {
		var projects = [ {
			value : "jquery",
			label : "jQuery",
			desc : "the write less, do more, JavaScript library",
			icon : "jquery_32x32.png"
		}, {
			value : "jquery-ui",
			label : "jQuery UI",
			desc : "the official user interface library for jQuery",
			icon : "jqueryui_32x32.png"
		}, {
			value : "sizzlejs",
			label : "Sizzle JS",
			desc : "a pure-JavaScript CSS selector engine",
			icon : "sizzlejs_32x32.png"
		} ];

		$("#project").autocomplete({
			autoFocus : true,
			minLength : 1,
			source : projects,
			select : function(event, ui) {
				$("#project").val(ui.item.label);
				return false;
			}
		}).data("ui-autocomplete")._renderItem = function(ul, item) {
			return $("<li>").append(
					"<a>" + "<strong>" + item.label + "</strong>"
							+ "<br> <span class='red'>" + item.desc
							+ "</span></a>").appendTo(ul);
		};
	})
</script>
</head>
<body>
	<div id="project-label">Select a project (type "j" for a start):</div>

	<input id="project">

</body>
</html>